<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <div>
            <el-input v-model="searchinfo.bname" placeholder="店主名字" style="display: inline-block; width: 200px;">
            </el-input>
            <el-input type="date" v-model="searchinfo.startdate" placeholder="开始日期" style="display: inline-block; width: 200px;">
            </el-input>
            <el-input type="date" v-model="searchinfo.enddate" placeholder="结束日期" style="display: inline-block; width: 200px;">
            </el-input>
            <el-button icon="el-icon-search" circle @click="searchBusiness()"></el-button>
        </div>
        <el-table :data="businessInfo" border style="width: 100%">
            <el-table-column prop="id" label="编号" width="180">
            </el-table-column>
            <el-table-column prop="bname" label="店主姓名">
            </el-table-column>
            <el-table-column prop="enterdate" label="入驻日期">
            </el-table-column>
            <el-table-column prop="telephone" label="手机号">
            </el-table-column>
            <el-table-column prop="store.sname" label="店铺名">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="showDetails(scope.row.id)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next" :total=pageTotal>
        </el-pagination>

        <el-dialog title="查看详情" :visible.sync="showDetailsBusinessVisiable" width="30%" center>
						<span>
							<el-form :model="showdetailsBusiness" status-icon :rules="rules" ref="showdetailsBusiness" label-width="100px"
                                     class="demo-ruleForm">

								<el-form-item label="商家头像" prop="bicon">
									<img :src="showdetailsBusiness.bicon" type="image" style="width: 100px;height:100px;">
								</el-form-item>

								<el-form-item label="店铺名字" prop="sname">
									<el-input v-model="showdetailsBusiness.store.sname" readonly="readonly"></el-input>
								</el-form-item>


								<el-form-item label="店主姓名" prop="bname">
									<el-input v-model="showdetailsBusiness.bname" readonly="readonly"></el-input>
								</el-form-item>

								<el-form-item label="入驻时间" prop="enterdate">
									<el-input v-model="showdetailsBusiness.enterdate" readonly="readonly"></el-input>
								</el-form-item>

								<el-form-item label="营业执照" prop="license">
									<img :src="showdetailsBusiness.license" type="image" style="width: 100px;height:100px;"></img>
								</el-form-item>

								<el-form-item label="手机号" prop="telephone">
									<el-input v-model="showdetailsBusiness.telephone" readonly="readonly"></el-input>
								</el-form-item>


								<el-form-item label="支付宝账号" prop="payaccount">
									<el-input v-model="showdetailsBusiness.payaccount" readonly="readonly"></el-input>
								</el-form-item>

								<el-form-item label="营业类别" prop="category">
									<el-input v-model="showdetailsBusiness.category.category" readonly="readonly"></el-input>
								</el-form-item>

								<el-form-item label="身份证正面" prop="cardfront">
									<img :src="showdetailsBusiness.cardfront" type="image" style="width: 100px;height:100px;"></img>
								</el-form-item>


								<el-form-item label="身份证反面" prop="cardreverse">
									<img :src="showdetailsBusiness.cardreverse" type="image" style="width: 100px;height:100px;"></img>
								</el-form-item>


								<el-form-item label="有效日期" prop="during">
									<el-input v-model="showdetailsBusiness.during" readonly="readonly"></el-input>
								</el-form-item>
							</el-form>
						</span>
            <span slot="footer" class="dialog-footer">
							<el-button @click="showDetailsBusinessVisiable = false">取 消</el-button>

            </span>
        </el-dialog>
    </div>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                businessInfo:[],
                searchinfo:{},
                showDetailsBusinessVisiable:false,
                showdetailsBusiness:{
                    store:{},
                    category:{},
                    enterPayType:{}
                }
            },
            methods:{
                handleCurrentChange: function(val) {
                    getInfo(val, 10);
                },
                searchBusiness:function () {
                   getInfo(1,10);
                },
                businessDetails:function () {
                    getInfo(1,10);
                },
                showDetails:function (a) {
                    app.showDetailsBusinessVisiable=true;
                    $.get("/cai/business/getOne/"+a,function (backData) {
                        app.showdetailsBusiness=backData.data;
                    });
                }
            }
        });
        function getInfo(a,b) {
            app.searchinfo.pageNo=a;
            app.searchinfo.pageCount=b;
            $.post("/cai/business/list",app.searchinfo,function (backData) {
                app.businessInfo=backData.data.currentPageData;
                app.pageTotal = backData.data.currentDataTotal;
            });
        }
        getInfo(1,10);
    </script>
</body>
</html>